<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Search Bar</title>

  <script src="jquery-1.10.2.js"></script>
<!--
  <script src="jquery-ui-1.10.3.custom.js"></script>
-->
</head>
<body>

<div>
  <p>Search Bar</p>
</div>

<button id="ibm">IBM</button>
<button id="microsoft">Microsoft</button>
<button id="yahoo">Yahoo</button>

<text>&nbsp &nbsp &nbsp Flip Screen:</text>
<select name="flipScreenFlag" id="flipScreenFlag">
  <option value="off" selected="selected">Off</option>
  <option value="on">On</option>
</select>

<br />

<div id="myDiv">
  <iframe name="myFrame" id="myFrame" src="" width="100%" height="800" seamless>
  </iframe>
</div>

<script>
  $("document").ready(function() {
    $("#myFrame").attr("src", myloc[0]);
    i = 0;
  });

  $("#flipScreenFlag").change(function() {
    var fsFlag = $("#flipScreenFlag").find(":selected").text();

    if (fsFlag == "Off") {
       flipFlag = false;
       i -= 1;
       if (i < 0)
         i = 2;
    } else {
       flipFlag = true;
       i += 1;
       if (i > 2)
         i = 0;
    }
  });

  $("#ibm").click(function() {
    $("#myFrame").attr("src", "http://www.ibm.com/");
    i = 0;
  });

  $("#microsoft").click(function() {
    $("#myFrame").attr("src", "http://www.microsoft.com/");
    i = 1;
  });

  $("#yahoo").click(function() {
    $("#myFrame").attr("src", "http://www.yahoo.com/");
    i = 2;
  });

  $("#myFrame").load(function() {
    var frameHeight = $("#myFrame").contents().find("html").height();
    frameHeight = frameHeight + 240; 
    $("#myFrame").attr("height", frameHeight);
  });

  var myloc = ["http://www.ibm.com/",
               "http://www.microsoft.com/",
               "http://www.yahoo.com/"];
  var i = 0;
  var flipFlag = false;
  var refresh = false;

  setInterval(function(){
     $("#myFrame").attr("src", myloc[i]);
      
    if (flipFlag) {
      i += 1;
      if (i > 2)
        i = 0;
    }    
  }, 30000);

</script>

</body>
</html>


</head>
<body>
 
 